
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片素材</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">
            <div id="tool">
                <form id="uploadForm" class="form-inline" action="${ctx}/admin/wechat/picture/upload?mpId=${currentMpId}&"
                      method="post" enctype="multipart/form-data" style="margin-top:20px;margin-bottom:20px;">
                    <div class="form-group">
                        <button id="browseFile" type="button" class="btn btn-success"><i class="glyphicon glyphicon-cog"></i> 添加图片</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>大小不超过2M，已开启图片水印</span>
                        <input type="file" id="file" name="file" style="width: 100%; height: 0px; opacity: 0; left: 0; right: 0;"
                               accept="image/bmp,image/png,image/jpg,image/jpeg,image/gif" onchange="checkFile(this)">
                    </div>
                </form>
            </div>
            <table id="table"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle("图片素材");

    $(function() {

        $("#browseFile").bind('click', function() {
            $("#file").click();
        });

        $('#table').bootstrapTable({
            url: '${ctx}/admin/wechat/picture/page-list?search_EQL_wechatMpId=${currentWechatMpId}&order=desc&sort=created_time',
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 25,
            sidePagination: 'server',
            uniqueId: 'id',
            /*checkbox : true,
            clickToSelect : true,*/
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [
                {
                    title: '#',
                    width : 50,
                    align : 'center',
                    valign:'middle',
                    formatter: snFormatter
                },
                {
                    field: 'url',
                    title: '图片',
                    valign: 'middle',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<img src="'
                            + value + '" style="width: 120px; height: 120px;"></img>';
                    }
                },
                {
                    field: 'name',
                    title: '名称',
                    valign: 'middle',
                    align: 'center',
                    cellStyle: function(value, row, index, field) {
                        return {
                            css: { "word-break": "break-all", "word-wrap": "break-word" }
                        };
                    }
                },
                {
                    field: 'createdTime',
                    title: '创建时间',
                    valign: 'middle',
                    align: 'center'
                },
                {
                    field: 'op',
                    searchable: true,
                    title: '操作',
                    valign: 'middle',
                    align: 'center',
                    formatter: operateFormatter
                }
            ]
        });
    });

    function operateFormatter(value,row,index) {
        var content = '<a title="编辑" onclick="modifyPictureName(' + row.id + ', \'' + row.name + '\'' +')"><i class="iconfont icon-iconfontcolor32"></i></a>';
        content += '&nbsp;&nbsp;&nbsp;&nbsp;';
        content += '<a href="javascript:del(' + row.id + ')" title="删除"><i class="iconfont icon-shanchu"></i></a>';
        return content;
    }

    function del(id,name) {
        carefulDelete('${ctx}/admin/wechat/picture/careful-delete',id,'请输入您的管理密码以确定删除此系统资源');
    }

    function modifyPictureName(id, name) {
        topLayer.prompt({
            formType: 0,
            value: name,
            title: '请输入图片名称',
            btnAlign: 'c',
            area: ['800', '500']
        }, function(value, index, elem){
            $.get(
                '${ctx}/admin/wechat/picture/update?id=' + id + '&name=' + value,
                function(result) {
                    var json = JSON.parse(result);
                    if (json.code == "OK") {
                        $('#table').bootstrapTable('refresh');
                    }
                    topLayer.msg(json.message, {icon: 1});
                    topLayer.close(index);
                },
                'json'
            );
        });
    }

    function checkFile(file) {
        var filePath = file.value;
        var fileExt = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();

        if (!fileExt.match(/.bmp|.gif|.png|.jpeg|.jpg/i)) {
            topLayer.msg("您选择的文件格式不正确, 请重新选择", { icon: 1});
            file.value = "";
            return;
        }
        if (file.files && file.files[0]) {
            if ((file.files[0].size / 1024 / 1024) > 2) {
                topLayer.msg("图片大小不能超过2M, 请重新选择", { icon: 1 });
                file.value = "";
                return;
            }
            $("#uploadForm").submit();
        }
    }
</script>
</body>
</html>
